<script setup lang="ts">
import type { DiskInfo } from '@/types/disk'
import { getUsageLevelClass, getUsageCardClass, getUsageTextClass } from '@/utils/DiskInfoItem'

interface Props {
  diskInfo: DiskInfo
}

const props = defineProps<Props>()
</script>

<template>
  <div class="disk-info-card" :class="getUsageCardClass(diskInfo.usage_rate)">
    <div class="disk-info-header">
      <span>{{ diskInfo.name }}</span>
      <span>{{ diskInfo.file_system }}</span>
    </div>
    <div class="disk-info-item">
      <span class="disk-info-label">挂载点:</span>
      <span class="disk-info-value">{{ diskInfo.mount_point }}</span>
    </div>
    <div class="disk-info-item">
      <span class="disk-info-label">总空间:</span>
      <span class="disk-info-value">{{ diskInfo.total }}</span>
    </div>
    <div class="disk-info-item">
      <span class="disk-info-label">已使用:</span>
      <span class="disk-info-value">{{ diskInfo.used }}</span>
    </div>
    <div class="disk-info-item">
      <span class="disk-info-label">可用空间:</span>
      <span class="disk-info-value">{{ diskInfo.free }}</span>
    </div>
    <div class="disk-info-item">
      <span class="disk-info-label">使用率:</span>
      <span class="disk-info-value" :class="getUsageTextClass(diskInfo.usage_rate)">
        {{ diskInfo.usage_rate.toFixed(2) }}%
      </span>
    </div>
    <div class="usage-bar-container">
      <div class="usage-bar">
        <div
          class="usage-bar-fill"
          :class="getUsageLevelClass(diskInfo.usage_rate)"
          :style="{ width: diskInfo.usage_rate + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/global.scss' as *;
@use '@/style/disk-info.scss' as *;
</style>
